<template>
  <div class="login-box">
      <ul class="login_content">
        <li class="login_title">xxxx系统</li>
         <li>
            <a-input placeholder="请输入账号" @change="changInput($event,'username')"></a-input>
         </li>
          <li>
            <a-input-password placeholder="请输入密码" @change="changInput($event,'password')"/>
         </li>
          <li class="login_bnt">
            <a-button type="primary" @click="loginClick">登录</a-button>
         </li>
       
      </ul>
  </div>
</template>

<script lang='ts'>
import { onMounted,reactive,toRefs } from 'vue';
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';

interface objData{
  info:any
}
export default {
  name: 'login',
  setup(){
      const router = useRouter();
      const store = useStore();
     const userInfo:objData = reactive({
           info:{
            username:'',
            password:'',
           }
       
     })
     onMounted(()=>{
            document.onkeydown = function(e) {
    
            //事件对象兼容
            let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
           
            if (e1 && e1.keyCode == 13) {
                loginClick()
            } 
        }
     });
     const changInput=(e:any,v:string)=>{
        userInfo.info = Object.assign(userInfo.info,{[v]:e.target.value})
     };
     const loginClick=()=>{
          console.log(store,"loginClick");
          let {username,password} = userInfo.info;
          if(!/^.+$/.test(username)){return message.error('用户名不能为空且长度不能小于4')};
          if(!/^.+$/.test(password)){return message.error('密码不能为空且长度不能小于5')};
               store.dispatch('Login',{username,password}).then(res=>{
                  router.push("/");
               }).catch(err=>{
                   message.error(err);
              })
     }
     return {
       ...toRefs(userInfo),loginClick,changInput
     }
  }
 
}
</script>

<style scoped lang="less">
  .login-box{
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../../assets/images/bg.png);
    background-size: 100% 100%;
    background-color: rgba(52, 152, 219, 1);
    .login_content{
      width: 350px;
      >li{
        margin-bottom: 10px;
        height: 40px;
      }
      >.login_title{
        width: 100%;
        font-size: 24px;
        font-weight: 600;
        color: #fff;
      }
      >.login_bnt{
        width: 100%;
        .ant-btn{
          width: 100%;
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
  
</style>
<style>
 
</style>
